﻿
<template>
    <div class="padding15">

        <el-row :gutter="20">
            <el-col :span="4">
                <el-table :data="classdata"
                          ref="singleTable"
                          height="550"
                          border
                          highlight-current-row
                          @current-change="selChange"
                          style="width: 100%;    margin-top: 5px;">
                    <el-table-column type="index" width="50">
                    </el-table-column>
                    <el-table-column prop="ClassName" label="字典类别">
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="20">
                <button type="button" class="btn btn-success" @click="addzd()" style="margin-left: 10px; margin-top: 5px; "><i class="iconfont icon-jiahao ft12 mr5"></i>添加字典项</button>
                <button type="button" class="btn btn-warning" @click="delzd('N')" style="margin-left: 10px; margin-top: 5px; "><i class="iconfont icon-shezhi ft12 mr5"></i>禁用字典项</button>
                <button type="button" class="btn btn-danger" @click="delzd('Y')" style="margin-left: 10px; margin-top: 5px; "><i class="iconfont icon-shezhi ft12 mr5"></i>彻底删除字典项</button>

                <base-table :pzoption="tableop" @selection-change="handleSelectionChange" style="margin-top:10px">
                </base-table>
            </el-col>

        </el-row>

        <div class="modal fade" id="EditRoleModal" role="dialog">
            <div class="modal-dialog" role="document" style="width: 700px">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">新增字典</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-horizontal">
                            <div class="form-group">
                                <label for="branchName" class="col-xs-3 control-label text-right">类别</label>
                                <div class="col-xs-7">
                                    <input type="text" class="form-control" v-model="zd.Class" placeholder="请输入类别" />
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="branchDesc" class="col-xs-3 control-label text-right">字典项</label>
                                <div class="col-xs-7">
                                    <input type="text" class="form-control" v-model="zd.TypeNO" id="roleorder" placeholder="请输入字典项" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="branchName" class="col-xs-3 control-label text-right">排序号</label>
                                <div class="col-xs-7">
                                    <input type="number" class="form-control" v-model="zd.Remark2" placeholder="请输入排序号" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="branchDesc" class="col-xs-3 control-label text-right">字典值</label>
                                <div class="col-xs-7">
                                    <textarea class="form-control" v-model="zd.TypeName" id="branchDesc" placeholder="请输入职务描述"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-success" id="conaddForder" @click="confimdata()">确&nbsp;&nbsp;认</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    module.exports = {
        props: ['pdata'],
        name:"xtzd",
        components: {
            'base-table': httpVueLoader('/ViewV5/Base/Vue/Table.vue')
        },
        data: function () {
            return {
                rztype: "字典列表",
                classdata: [],
                zd: { TypeNO: "", TypeName: "", Class: "", ID: "0", Remark2: "0"},
                tableop: {
                    title: "自定义应用",
                    issel: true,
                    iscz: false,
                    dataset: [],
                    multipleSelection: [],
                    czltabledata: [
                        {
                            colname: "编辑", bttype: "text", isshow: true, mangefun: function (item) {
                                var pro = this.$parent.$parent.$parent;
                                pro.zd = JSON.parse(JSON.stringify(item));
                                $('#EditRoleModal').modal('show');
                            },
                        },
                    ],
                    collist: [
                        { colid: "TypeNO", colname: "字典项", isshow: true, istip: true,width:"150px" },
                        { colid: "TypeName", colname: "字典值", isshow: true, istip: true },
                        { colid: "Remark2", colname: "排序", isshow: true, istip: true, width: "150px" },
                        { colid: "Class", colname: "字典类别", isshow: true, istip: true, width: "150px" },
                        { colid: "Remark3", colname: "启用", isshow: true, width: "150px" , istip: true },
                    ]
                }
            }
        },
        methods: {
            selChange(val) {
                this.currentRow = val;
                this.getZDData(val.ClassName);
                this.zd.Class = val.ClassName;
            },
            handleSelectionChange(val) {
                this.tableop.multipleSelection = val;
            },
            addzd: function () {
                this.zd.ID = "0"; 
                this.zd.TypeNO = ""; 
                this.zd.TypeName = ""; 
                $('#EditRoleModal').modal('show');
            },
            edid: function () {
                $('#EditRoleModal').modal('show');
            },
            confimdata: function () {
                var pro = this;
                $.getJSON('/api/Auth/ExeAction?Action=SAVETYPEMODEL', { P1: JSON.stringify(pro.zd) }, function (resultData) {
                    if (resultData.ErrorMsg == "") {
                        pro.getZDData(pro.zd.Class);
                        $('#EditRoleModal').modal('hide');
                        top.ComFunJS.winsuccess("操作成功");

                    }

                })
            },
            getZDData: function (type) {
                var pro = this;
                $.getJSON('/api/Auth/ExeAction?Action=GETZIDIAN', { P1: type }, function (resultData) {
                    if (resultData.ErrorMsg == "") {
                        pro.tableop.dataset = resultData.Result;
                    }

                })
            },
            delzd: function (type) {
                var pro = this;
                var ids = [];
                for (var i = 0; i < pro.tableop.multipleSelection.length; i++) {
                    ids.push(pro.tableop.multipleSelection[i].ID);
                }
                if (ids.length == 0) {
                    this.$notify.error({
                        title: '错误',
                        message: '至少需要选择一条数据才能操作'
                    });
                    return;
                }
                ComFunJS.winconfirm("确认要禁用该数据项吗？", function () {
                    $.getJSON("/api/Auth/ExeAction?Action=SETZIDIAN", { P2: type, P1: ids.join() }, function (r) {
                        if (r.ErrorMsg == "") {
                            pro.getZDData(pro.zd.Class);
                            ComFunJS.winsuccess("操作成功");
                        }
                    })
                }, function () { })
            },

            InitWigetData: function () {
     
            },
        },
        mounted: function () {
            var pro = this;
            pro.$nextTick(function () {
                $.getJSON('/api/Auth/ExeAction?Action=INITZIDIAN', { P1: "" }, function (resultData) {
                    if (resultData.ErrorMsg == "") {
                        pro.classdata = resultData.Result;
                        pro.$refs.singleTable.setCurrentRow(resultData.Result[0]);

                       // pro.selChange(resultData.Result[0])
                    }

                })
            })

        },
        watch: {

        }
    };
</script>